<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>05.getList</title>
		<script src="./js/JSON.js"></script>
		<script src="./js/ajax.js"></script>
		<script>
			window.onload = function () {
				var oBtn = document.getElementById("btn1");
				var oUl = document.getElementById("list");
				oBtn.addEventListener('click', function () {
					ajax ('GET', './php/getList.php', '', function (data) {
						var html = '';
						var listData = JSON.parse(data);
						// alert(listData.length);
						for ( var i = 0, len = listData.length; i < len; i++ ) {
							html += '<li>我的姓名是：' + listData[i].name + '，我的年龄是：' + listData[i].age + '，我的性别是：' + listData[i].gender + '</li>';		
						}
						oUl.innerHTML = html;	
					});
				}, false);
				
				var oTimer = setInterval(function () {
					ajax ('GET', './php/getList.php', '', function (data) {
						var html = '';
						var listData = JSON.parse(data);
						// alert(listData.length);
						for ( var i = 0, len = listData.length; i < len; i++ ) {
							html += '<li>我的姓名是：' + listData[i].name + '，我的年龄是：' + listData[i].age + '，我的性别是：' + listData[i].gender + '</li>';		
						}
						oUl.innerHTML = html;	
					});	
				}, 2000)
			};
		</script>
	</head>
	<body>
		<input type="button" value="获取列表内容" id="btn1" />
		<ul id="list"></ul>
	</body>
</html>
